<template>
  <div class="chartshow chartshowBottom">
    <!-- 柱状图-->
    <div class="chart chart-size" ref="chartContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref<any>(null);
// 接收父组件传过来的数据
const propsRef = defineProps(["statisticChartSource"])
const props = ref<any>(propsRef)
const chartInstance = ref()


const loadData = (WEndTime: any, QualifiedCount: any, DefectiveCount: any, AbnormalCount: any) => {
  chartInstance.value = echarts.init(chartContainer.value);
  const option = {
    title: {
      text: '分时统计',
      left: 0, // 标题水平居中
      right: 0,
      top: 'top', // 标题距离顶部的距离
      textStyle: {
        color: '#595959', // 文本颜色
        fontSize: 14, // 文本字号
        fontWeight: 'normal' // 文本粗细
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow"// 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "7%",//距离dom间距
      right: "4%",
      top: "10%",
      bottom: "10%"
    },
    legend: {
      data: [
        { name: "好品", icon: "circle" },
        { name: "坏品", icon: "circle" },
        { name: "异常品", icon: "circle" }
      ],

      // 大小 和位置 文字样式
      itemGap: 12,
      right: 20,
      textStyle: {
        fontSize: 14,
        color: "#595959",
      },
      selectedMode: 'single' // 设置单选多选模式
    },
    xAxis: [
      {
        type: "category",
        data: WEndTime,
        axisPointer: {
          // type: "shadow"
        },
        // 横坐标 分割线等取消显示
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F2F2F2', // 设置X轴的轴线颜色 黑/5%黑 #F2F2F2
          },
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#8C8C8C', // 设置X轴的数值颜色为黑/45%黑
          },
          interval: 0, // 设置为 'auto' 自动计算显示间隔
          formatter: function (value: any, index: any) {
            if (index % 2 === 0) { // 每隔一个时间显示一个
              const [date, time] = value.split(' ');
              const [year, month, day] = date.split('-');
              return month + '-' + day + '\n' + time.substr(0, 5); // 显示月和日
            }
            return ''; // 其他时间不显示
          },
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            fontSize: 16,
            color: "#8C8C8C",   //黑/45%黑
          }
        },
        // 纵坐标数据
        yAxisIndex: 0,
        // 横坐标 分割线等取消显示
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true, // 显示Y轴每个刻度对应的X轴的轴线
          lineStyle: {
            color: '#F2F2F2', // 设置X轴的轴线颜色 黑/5%黑 #F2F2F2
          },
        },
      },
    ],
    series: [
      {
        name: "好品",
        type: "bar",
        // 宽度
        barWidth: "16",
        // 全部背景
        data: QualifiedCount,
        itemStyle: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 16
            },
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 1,
                  color: "#1AA367"
                }
              ],
              false
            )
          }
        }
      },
      {
        name: "坏品",
        type: "bar",
        // 宽度
        barWidth: "16",
        // 全部背景
        backgroundStyle: {
          color: "#EEF2F9"
        },
        data: DefectiveCount,
        itemStyle: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 16
            },
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 1,
                  color: "#ff636b"
                }
              ],
              false
            )
          }
        }
      },
      {
        name: "异常品",
        type: "bar",
        // 宽度
        barWidth: "16",
        // 全部背景
        backgroundStyle: {
          color: "#EEF2F9"
        },
        data: AbnormalCount,
        itemStyle: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 16
            },
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 1,
                  color: "#ffbc00"
                }
              ],
              false
            )
          }
        }
      }
    ]
  };
  window.onresize = function () {//自适应大小
    chartInstance.value.resize();
  };
  chartInstance.value.setOption(option);
};

onMounted(() => {
  chartInstance.value = echarts.init(chartContainer.value);
  chartInstance.value.resize();
  loadData(0, 0, 0, 0)
})

watch(props, (value, oldValue) => {
  // setTimeout(() => {

  if (value.statisticChartSource) {
    loadData(value.statisticChartSource.WEndTime, value.statisticChartSource.QualifiedCount, value.statisticChartSource.DefectiveCount, value.statisticChartSource.AbnormalCount)
  }
  // }, 1000)
}, {
  deep: true
})
</script>

<style scoped lang="less">
/*@media screen and (max-height: 1440px) {
  .chartshowBottom {
    height: 840px;
  }

  .chart-size {
    width: 100%;
    height: 100%;
  }
}*/

/*@media screen and (max-height: 1080px) {
  .chartshowBottom {
    height: 480px;
  }

  .chart-size {
    width: 100%;
    height: 98%;
  }
}*/


/*:deep(#zr_0) {
  position: absolute;
  top: -30px;
}*/

.chartshow {
  width: 45%;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 20px 0 24px 24px;
  height: 100%;
  /*高固定*/



  .chart {
    height: 100%;
  }
}
</style>